<script setup>
  import * as echarts from 'echarts'
  import { ref, reactive, onMounted } from 'vue'
  import breadCrumb from '@/components/bread_crumb.vue'
  const item = ref({
    first: '系统概览',
  })
  import { useUserInfoStore } from '@/store/userinfo.js'
  import SvgIcon from '@/components/SvgIcon.vue'
  import { getUserInfoApi } from '@/api/userinfo.js'
  const userInfoStore = useUserInfoStore()
  // 用户头像
  const imageUrl = userInfoStore.userInfo.image_url

  // 获取用户信息
  const userData = ref({
    account: '',
    name: '',
    sex: '',
    id: '',
    identity: '',
  })
  const userid = userInfoStore.userInfo.id
  const getuserinfo = async (ids) => {
    const res = await getUserInfoApi(ids)
    // console.log(res.data.result)
    const { account, name, sex, id, identity } = res.data.result
    userData.value = {
      account,
      name,
      sex,
      id,
      identity,
    }
  }
  getuserinfo(userid)

  // 调用echarts图
  onMounted(() => {
    manageUser()
    productCategoryBar()
    massageLevel()
    massageAllDay()
  })

  // 管理员与用户比值图
  const manageUser = () => {
    // 通过类名 初始化
    const mu = echarts.init(document.querySelector('.manage-user'))
    document
      .querySelector('.manage-user')
      .setAttribute('_echarts_instance_', '')
    // 设置基本的参数
    mu.setOption({
      title: {
        text: '管理与用户对比图',
        // subtext: 'Fake Data',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        padding: [20, 20, 20, 20],
      },
      series: [
        {
          // name: 'Access From',
          type: 'pie',
          radius: '65%',
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    })
    // 用于echarts响应式
    window.addEventListener('resize', function () {
      mu.resize()
    })
  }

  // 产品类别图
  const productCategoryBar = async () => {
    const pcb = echarts.init(document.querySelector('.product-category-bar'))
    document
      .querySelector('.product-category-bar')
      .setAttribute('_echarts_instance_', '')
    pcb.setOption({
      title: {
        text: '产品类别库存总价图',
        top: '3%',
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        // 食品类，服装类，鞋帽类，日用品类，家具类，家用电器类，纺织品类，五金类
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          barWidth: 40,
          colorBy: 'data',
        },
      ],
    })
    window.addEventListener('resize', function () {
      pcb.resize()
    })
  }

  // 公告等级分布图
  const massageLevel = () => {
    const ml = echarts.init(document.querySelector('.massage-level'))
    document
      .querySelector('.massage-level')
      .setAttribute('_echarts_instance_', '')
    ml.setOption({
      title: {
        text: '公告等级分布图',
        top: '3%',
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        top: '5%',
        left: 'center',
      },
      series: [
        {
          // name: 'Access From',
          type: 'pie',
          radius: ['35%', '65%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' },
          ],
        },
      ],
    })
    window.addEventListener('resize', function () {
      ml.resize()
    })
  }

  // 消息每日总量图
  const massageAllDay = () => {
    const mad = echarts.init(document.querySelector('.userlogin-week'))
    document
      .querySelector('.userlogin-week')
      .setAttribute('_echarts_instance_', '')
    mad.setOption({
      title: {
        text: '每日登录人数图',
        top: '3%',
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'item',
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line',
        },
      ],
    })
    window.addEventListener('resize', function () {
      mad.resize()
    })
  }
</script>

<template>
  <breadCrumb ref="breadCrumb" :item="item"></breadCrumb>
  <div class="overview-wrapped">
    <!-- 顶部内容外壳 -->
    <div class="top-content-wrapped">
      <!-- 个人信息 -->
      <div class="person-info">
        <!-- 用户头像外壳 -->
        <div class="person-avatar-wrapped">
          <el-avatar :size="100" :src="imageUrl"></el-avatar>
          <span class="department"
            >所属部门：{{ userInfoStore.department }}</span
          >
          <div class="company">所属公司：济南晏鲸创意设计有限公司</div>
        </div>
        <!-- 竖线 -->
        <div class="line-wrapped">
          <div class="line"></div>
        </div>
        <!-- 详细信息外壳 -->
        <div class="detail-info-wrapped">
          <p>姓名：{{ userData.name }}</p>
          <p>性别：{{ userData.sex }}</p>
          <p>身份：{{ userData.identity }}</p>
          <p>分管领域：超级管理</p>
          <p>权限：最高权限</p>
        </div>
      </div>
      <div class="manage-user pie"></div>
    </div>
    <!-- 中间内容外壳 -->
    <div class="mid-content-wrapped">
      <div class="product-category-bar mid-content-left"></div>
      <div class="mid-content-right">
        <div class="title">常用管理</div>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="button-area" @click="routerTo('users_manage')">
              <SvgIcon
                icon-name="user"
                style="width: 24px; height: 24px"
              ></SvgIcon>
              <span class="button-name">用户管理</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="button-area" @click="routerTo('product_manage_list')">
              <SvgIcon
                icon-name="product"
                style="width: 24px; height: 24px"
              ></SvgIcon>
              <span class="button-name">产品管理</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="button-area" @click="routerTo('message_list')">
              <SvgIcon
                icon-name="notice"
                style="width: 24px; height: 24px"
              ></SvgIcon>
              <span class="button-name">系统消息</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="button-area" @click="routerTo('set')">
              <SvgIcon
                icon-name="me"
                style="width: 24px; height: 24px"
              ></SvgIcon>
              <span class="button-name">个人信息</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="button-area">
              <SvgIcon
                icon-name="message"
                style="width: 24px; height: 24px"
              ></SvgIcon>
              <span class="button-name">部门信息</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="button-area" @click="routerTo('set')">
              <SvgIcon
                icon-name="set"
                style="width: 24px; height: 24px"
              ></SvgIcon>
              <span class="button-name">系统设置</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 底部内容外壳 -->
    <div class="footer-content-wrapped">
      <div class="massage-level footer-content-left"></div>
      <div class="userlogin-week footer-content-right"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  // 总览内容
  .overview-wrapped {
    padding: 8px;
    height: calc(100vh - 101px);
    background: #f8f8f8;

    // 上部分内容 个人资料 + 饼状图
    .top-content-wrapped {
      height: 30%;
      display: flex;

      // 个人信息
      .person-info {
        height: 100%;
        margin-right: 8px;
        width: calc(50% - 8px);
        display: flex;
        background: #fff;

        // 头像区域
        .person-avatar-wrapped {
          display: flex;
          width: 50%;
          height: 100%;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          // 公司
          .company {
            margin: 10px 0;
            font-size: 12px;
          }

          // 职务
          .department {
            margin-top: 8px;
            font-size: 12px;
          }
        }

        // 分割线
        .line-wrapped {
          height: 100%;
          display: flex;
          align-items: center;

          .line {
            height: 170px;
            border: 1px solid #d3d3d3;
          }
        }

        // 详细信息区域
        .detail-info-wrapped {
          height: 100%;
          width: calc(50% - 1px);
          margin-left: 50px;
          font-size: 12px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
        }
      }

      // 饼状图
      .pie {
        width: calc(50%);
        height: 100%;
        background: #fff;
      }
    }

    // 中间部分内容 消息阅读量图 产品类别图
    .mid-content-wrapped {
      margin-top: 8px;
      height: calc(32% - 8px);
      display: flex;

      // 中间左部分
      .mid-content-left {
        margin-right: 8px;
        width: calc(60% - 8px);
        background: #fff;
      }

      // 中间右部分
      .mid-content-right {
        width: calc(40%);
        background: #fff;
        padding: 8px;

        // 标题
        .title {
          font-size: 14px;
          margin-bottom: 8px;
        }

        // 按钮区域
        .button-area {
          margin-bottom: 8px;
          height: 70px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          background: #f5f5f5;

          // 按钮名字
          .button-name {
            margin-top: 10px;
          }
        }

        // 按钮变色
        .button-area:hover {
          background: #e4efff;
        }
      }
    }

    // 底部内容
    .footer-content-wrapped {
      margin-top: 8px;
      height: calc(38% - 8px);
      display: flex;

      // 底部左部分
      .footer-content-left {
        margin-right: 8px;
        height: 100%;
        width: calc(30% - 8px);
        background: #fff;
      }

      // 底部右部分
      .footer-content-right {
        height: 100%;
        width: calc(70%);
        background: #fff;
      }
    }
  }
</style>
